<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习1</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>综合练习1</h1>
        <input type="checkbox" v-model="isMember"> 是否会员<br>
        <div v-show="isMember">
            <select v-model="level">
                <option value="0.9">普通会员（9折）</option>
                <option value="0.85">黄金会员（8.5折）</option>
                <option value="0.8">钻石会员（8折）</option>
            </select>
            <p>{{ memberMap[level] }}欢迎你的到来</p>
        </div>
        数量:<input type="text" v-model="quantity" placeholder="请输入数量" @keydown.enter="checkResult"><br>
        单价<input type="text" v-model="unitPrice" placeholder="请输入单价" @keydown.enter="checkResult">
        <div v-if="showResult">
            您购买的商品，数量是{{ quantity }}，单价是{{ unitPrice }}，
            折扣是{{ isMember ? Number(level) : 1 }}，
            总价是{{ (quantity * unitPrice * (isMember ? Number(level) : 1)).toFixed(2) }}
        </div>
    </div> <!-- 修复：删除了多余的闭合标签，确保结构正确 -->

    <script>
        const connApp = Vue.createApp({
            data() {
                return {
                    isMember: false,
                    level: "0.9",
                    quantity: 0,
                    unitPrice: 0,
                    showResult: false,
                    memberMap: {
                        "0.9": "普通会员",
                        "0.85": "黄金会员",
                        "0.8": "钻石会员"
                    }
                }
            },
            methods: {
                // 修复：恢复checkResult方法，确保回车事件能正常触发
                checkResult() {
                    this.showResult = this.quantity > 0 && this.unitPrice > 0;
                }
            }
        }).mount("#app")
    </script>
</body>
</html>